import { listUserAnswerVoByPageUsingPost } from "@/services/backend/userAnswerController";
import { Button, Card } from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import DetailModal from "../PublicApp/components/DetailModal";

const AnswerHistoryPage: React.FC = () => {

  const [answerHistoryList, setAnswerHistoryList] = useState<API.UserAnswerVO[]>([]);
  const [appId, setAppId] = useState<number>(-1);
  const [detailVisible, setDetailVisible] = useState(false);
  const getAnswerHistoryList = async () => {
    const res = await listUserAnswerVoByPageUsingPost({});
    setAnswerHistoryList(res?.data?.records || []);
  };
  const handleCheckAppDetail = (appId: number) => {
    if (appId < 0) {
      return;
    }
    setAppId(appId);
    setDetailVisible(true);
  }

  useEffect(() => {
    getAnswerHistoryList();
  }, []);

  return (
    <>
      {
        answerHistoryList.map((item) => (
          <Card key={item.id} style={{ marginBottom: 16 }}>
            <div style={{ display: 'flex' }}>
              <div style={{ display: "flex", flexDirection: "column" }}>
                <h2>应用名称：{item.appId}</h2>
                <p>测试结果：{item.resultName}</p>
                <p>测试描述：{item.resultDesc}</p>
                <p>选择的选项：{item.choices?.join(',')}</p>
                <p>测试时间：{item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}</p>
              </div>
              <Button type="primary" onClick={() => handleCheckAppDetail(item.appId? item.appId : -1)}>再次尝试</Button>
            </div>
          </Card>

        ))
      }
      <DetailModal
        visible={detailVisible}
        appId={appId}
        onCancel={() => {
          setDetailVisible(false);
        }}
      />
    </>
  );
};
export default AnswerHistoryPage;